<template>
  <view class="notice-detail-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 公告内容 -->
    <view class="notice-content">
      <view class="notice-header">
        <text class="notice-title">{{ notice.title }}</text>
        <text class="notice-date">{{ notice.createTime }}</text>
      </view>
      <view class="notice-body">
        <rich-text :nodes="notice.content"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      notice: {
        title: '',
        content: '',
        createTime: ''
      }
    }
  },

  onLoad(options) {
    if (options.id) {
      this.loadNoticeDetail(options.id)
    }
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 加载公告详情
    async loadNoticeDetail(id) {
      try {
        const res = await uni.request({
          url: `${uni.$config.baseUrl}/system/notice/${id}`,
          method: 'GET'
        })

        if (res.data.code === 200) {
          const noticeData = res.data.data
          this.notice = {
            title: noticeData.noticeTitle,
            content: noticeData.noticeContent,
            createTime: this.formatDate(noticeData.createTime)
          }
        } else {
          throw new Error(res.data.msg || '获取公告详情失败')
        }
      } catch (err) {
        console.error('获取公告详情失败:', err)
        uni.showToast({
          title: '获取公告详情失败',
          icon: 'none'
        })
      }
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
.notice-detail-container {
  min-height: 100vh;
  background: #FFFFFF;
  margin-top: 20rpx;
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    border-bottom: 1rpx solid #F5F5F5;
    margin-top: 30rpx;
    .left-icon {
      padding: 20rpx;
      margin-left: -20rpx;
      
      .icon-back {
        font-size: 40rpx;
        color: #333333;
      }
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      margin-right: 56rpx;
    }
  }

  .notice-content {
    padding: 40rpx;
    
    .notice-header {
      margin-bottom: 50rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #F5F5F5;
      
      .notice-title {
        display: block;
        font-size: 42rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 24rpx;
        line-height: 1.4;
      }
      
      .notice-date {
        font-size: 28rpx;
        color: #999999;
        background: #F8F8F8;
        padding: 6rpx 20rpx;
        border-radius: 30rpx;
        display: inline-block;
      }
    }
    
    .notice-body {
      font-size: 32rpx;
      color: #333333;
      line-height: 1.8;
      
      :deep(img) {
        max-width: 100%;
        height: auto;
        border-radius: 8rpx;
        margin: 20rpx 0;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      }
      
      :deep(p) {
        margin-bottom: 24rpx;
      }
      
      :deep(a) {
        color: #2B87FF;
        text-decoration: none;
      }
      
      :deep(ul), :deep(ol) {
        padding-left: 40rpx;
        margin-bottom: 24rpx;
      }
      
      :deep(li) {
        margin-bottom: 16rpx;
      }
      
      :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
        font-weight: 600;
        margin-top: 40rpx;
        margin-bottom: 24rpx;
        color: #333333;
      }
      
      :deep(h1) {
        font-size: 40rpx;
      }
      
      :deep(h2) {
        font-size: 36rpx;
      }
      
      :deep(h3) {
        font-size: 34rpx;
      }
      
      :deep(blockquote) {
        border-left: 8rpx solid #2B87FF;
        padding: 20rpx;
        background: #F8F8F8;
        margin: 20rpx 0;
        border-radius: 8rpx;
      }
      
      :deep(code) {
        background: #F5F5F5;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
        font-family: monospace;
      }
    }
  }
}
</style> 